import React, { useState, useRef, useEffect } from 'react';
import './gameplay.scss';





 const IMAGE_LIST = [ 
  {
        id:'1',
        url:'https://gaoding-market.dancf.com/market-operations/market/side/0a913d9a8f4f46f88c51eb97e63e893c/1747966318290.png?x-oss-process=image/format,webp'
    },
      {
        id:'2',
        url:'https://gaoding-market.dancf.com/market-operations/market/side/77471d55f2df4a6cb414d5f2d11b0135/1747884662377.png?x-oss-process=image/format,webp'
    },
      {
        id:'3',
        url:'https://gaoding-market.dancf.com/market-operations/market/side/3a0c17c23b544a5abe751df802ef2d48/1745577857247.jpg?x-oss-process=image/format,webp'
    },
      {
        id:'4',
        url:'https://gaoding-market.dancf.com/market-operations/market/side/e395a84351234cbf90ee1172f20e8f60/1744356772418.png?x-oss-process=image/format,webp'
    },
     {
        id:'5',
        url:'https://gaoding-market.dancf.com/market-operations/market/side/cd454d4e5c6f408fb63c82416b340ae8/1739523254641.png?x-oss-process=image/format,webp'
    }
 
 ]




function GamePlay(  ) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [transitionEnabled, setTransitionEnabled] = useState(true);
  const contentRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
   const [visibleItems] = useState(3.5); // 可见图片数量
  const [itemWidth, setItemWidth] = useState(0); // 新增state存储宽度

  // 动态计算itemWidth
useEffect(() => {
  const updateWidth = () => {
    if (containerRef.current) {
      const containerWidth = containerRef.current.offsetWidth;
      // 计算逻辑修正：CSS中padding为左右各60px，总减去120px；gap为15px
      const calculatedWidth = (containerWidth - 20 - (visibleItems - 1) * 50) / visibleItems;
      setItemWidth(calculatedWidth);
    }
  };

  updateWidth();
  window.addEventListener('resize', updateWidth);
  return () => window.removeEventListener('resize', updateWidth);
}, [visibleItems]);

// transform计算同步修正gap值
const transformValue = -currentIndex * (itemWidth + 50); // gap为15px

  useEffect(() => {
    if (currentIndex === 0) {
      // 首次加载后禁用过渡重置位置的动画
      setTimeout(() => setTransitionEnabled(true), 0);
    }
  }, [currentIndex]);

  const handleNext = () => {
    if (currentIndex < IMAGE_LIST.length - 1) {
      setCurrentIndex(prev => prev + 1);
    }
  };

  const handlePrev = () => {
    if (currentIndex > 0) {
      setCurrentIndex(prev => prev - 1);
    }
  };

 

  return (
    <div className="carousel-container" ref={containerRef}>
        <h2>玩法新探</h2>
      <div 
        className="carousel-content"
        ref={contentRef}
        style={{
          transform: `translateX(${transformValue}px)`,
          transition: transitionEnabled ? 'transform 0.3s ease-in-out' : 'none',
        }}
      >
        {IMAGE_LIST.map((item, index) => (
          <div 
            key={item.id}
            className="carousel-item"
             style={{ 
              width: `${itemWidth}px`, // 使用计算后的宽度
              minWidth: `${itemWidth}px` 
            }}
          >
            <img src={item.url} alt={`carousel-${index}`} />
          </div>
        ))}
      </div>

      {/* 箭头控制 */}
      {currentIndex > 0 && (
        <button 
          className="arrow-btn left"
          onClick={handlePrev}
        >
          {/* 替换为你的左箭头图片 */}
          <span>&lt;</span>
        </button>
      )}
      
      {currentIndex < IMAGE_LIST.length - 1 && (
        <button 
          className="arrow-btn right"
          onClick={handleNext}
          style={{ 
      // 添加内联样式控制显隐
      display: currentIndex === IMAGE_LIST.length - 1 ? 'none' : 'block'
    }}
        >
          {/* 替换为你的右箭头图片 */}
          <span>&gt;</span>
        </button>
      )}
    </div>
  );
}

export default GamePlay;